<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            border: 10px solid #dddddd;
            margin: 0;
        }
        #box {
            box-sizing: content-box;
            border: 20px solid #dddddd;
            width: 300px;
            height: 300px;
            padding: 40px;
            margin: 10px;
            text-align: center;
            position: relative;
        }
        #box2{
            position: static;
        }
        #child-box {
            box-sizing: content-box;
            /*box-sizing: border-box;*/
            border: 20px solid #dddddd;
            width: 100px;
            height: 120px;
            padding: 20px;
            text-align: center;
            margin: 20px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="box">
    这是父盒子
    <div id="box2">
        <div id="child-box">
            这是子盒子
        </div>
    </div>
</div>
<script>
    const childBox = document.getElementById('child-box');

    /**
     * node.offsetWidth/Height 表示该盒子除margin外占据的空间大小，
     * 所以node.offsetWidth = contentWidth(默认包含滚动条的width在内的) + paddingLeft + paddingRight + borderLeft + borderRight；
     * 因此 offsetWidth 不再需要手动减去滚动条的width了
     * offsetWidth = clientWidth + borderLeft + borderRight +  滚动条的width
     * 所以我们可以利用上面的公式计算出: 滚动条的width = offsetWidth - clientWidth - borderLeft - borderRight
     * 对于content-box 和 border-box 都适用，对于border-box ： offsetWidth = width
     * 同理 node.offsetHeight 也是同样的计算方法
     */

    // content-box： 100 + 20 + 20 + 20 + 20 = 180 （ 内容区width默认包含了滚动条的width）
    // border-box: 指定的width默认就包含了内容区width + padding + border 所以 offsetWidth = width = 100  （内容区width默认包含了滚动条的width）
    console.log('offsetWidth:', childBox.offsetWidth)

    // content-box:  120 + 20 + 20 + 20 + 20 = 200 （内容区width默认包含了滚动条的width）
    // border-box: 指定的width默认就包含了内容区width + padding + border 所以 offsetWidth = width = 120 （内容区width默认包含了滚动条的width）
    console.log('offsetHeight:', childBox.offsetHeight)

    // 根据公式： 滚动条的width = offsetWidth - clientWidth - borderLeft(clientLeft) - borderRight
    const sw = childBox.offsetWidth - childBox.clientWidth - parseInt(getComputedStyle(childBox).borderLeftWidth) - parseInt(getComputedStyle(childBox).borderLeftWidth)
    console.log("滚动条的width:",sw)  // 16


    /**
     * offsetLeft/Top 表示当前元素距离 offsetParent（默认是body） 元素最左边和最上边的距离
     * offsetParent的情况:
     * 1.如果当前元素的父级元素中都没有进行position定位（除static外），offsetPatent就为body
     * 2.如果当前元素的父级元素中有position定位的，offsetPatent取使用position定位最近的父级元素
     * 这个与position中absolute定位找relative的思想一致的
     */
    console.log('offsetParent:', childBox.offsetParent)
    console.log('offsetLeft:', childBox.offsetLeft)
    console.log('offsetTop:', childBox.offsetTop)

</script>
</body>
</html>